<template>
  <div class="main">
    <back-home></back-home>
    
    <div class="container">
      <div class="top">
        <lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation"/>
        <div class="topControl">
          <div class="sliderBox">
              <p>速度: x{{animationSpeed}}</p>
              <el-slider v-model="animationSpeed" :min="0" :max="3" :step="0.2" @change="onSpeedChange"></el-slider>
          </div>
          <el-button v-on:click="stop">stop</el-button>
          <el-button v-on:click="pause">pause</el-button>
          <el-button v-on:click="play">play</el-button>
        </div>
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>使用方法：</span>
        </div>
        <div class="markdownContainer" v-html="codeMsg"></div>
      </el-card>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in collectionList">
          <el-card>
            <lottie :options="item.data" class="itemLottie"/>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import backHome from 'c/backHome';
import Lottie from 'vue-lottie'
import * as animationData from "./json/flybird.json";
import readme from './readme.md'

export default {
  components: {
    backHome,
    'lottie': Lottie
  },
  data() {
    return {
      defaultOptions: { animationData: animationData },
      animationSpeed: 1,
      anim: {},

      codeMsg: this.md2html(readme),
      collectionList: []
    };
  },
  created() {

  },
  mounted() {
    this.init()
  },
  computed: {},
  methods: {
    init(){
      const files = require.context('./json', false, /.json$/).keys()
      let array = []
      files.map(res => {
        let name = res.split('./')[1]
        let dt = require('./json/'+ name)
        array.push({
          name ,
          data: {
            animationData: dt
          }
        })
      })
      this.collectionList = array;
    },
    handleAnimation: function(anim) {
        this.anim = anim;
        // console.log(anim); //这里可以看到 lottie 对象的全部属性
    },
    stop: function () {
      this.anim.stop();
    },

    play: function () {
      this.anim.play();
    },
    pause: function () {
      this.anim.pause();
    },
    onSpeedChange: function () {
      this.anim.setSpeed(this.animationSpeed);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.main {
  padding: 0 0 30px;
}
.top {
  margin-bottom: 30px;
  .topControl {
    text-align: center;
  }
  .sliderBox {
    width: 160px;
    margin: 0 auto;
  }
}
.box-card {
  margin-bottom: 30px;
}
.itemLottie {
  width: 100% !important;
  height: 200px !important;
  padding: 15px;
}
</style>
